<template>
  <a
    @mousedown="mousedown($event)"    @mouseup='mouseup($event)'

    @touchstart.prevent="mousedown($event)"    @touchend.prevent="mouseup($event)"

     :style="style"  href="javascript:void 0;" id="service">
  </a>
</template>
<script>
  export default {
    name : 'service',
    watch: {
      '$route.path'(path) {
        let views = ['/entrance'];
        let showMq = views.indexOf(path) >= 0;
        if(!showMq){
          // require('../common/js/meiQia').hideMeiQia();
        }
      },
    },
    data(){
      return{
        style:{}, //客服按钮的屏幕位置
        downTime : 0, //按下鼠标的时间
        // upTime : 0, //提起鼠标的时间
        screenWidth : 1024,//屏幕宽度
        screenHeight : 500 ,//屏幕高度
      }
    },
    mounted() {

      const thiz = this;
      window.screenWidth = document.body.clientWidth;
      let screenWidth  = window.screenWidth;
      thiz.screenHeight = window.screen.availHeight;
      thiz.screenWidth = screenWidth;
      if(screenWidth > 1024){
        thiz.style = {'left': '50% ', 'margin-left' : '230px' , 'top' : '65%' ,};
      }else{
        thiz.style = {'top' : '65%' , 'right' : '5px'};
      }
    },
    methods:{
      mousedown: function ( event) {
        this.downTime = new Date().getTime();
        let browserType = this.browserType();
        if(browserType == 2){
          this.movePc(event);
        }else{
          this.movePhone(event);
        }
      },
      movePc(event){
        var event= event||window.event;
        var _target = event.target;
        var startx=event.clientX;
        var starty=event.clientY;
        var sb_bkx=startx-event.target.offsetLeft;
        var sb_bky=starty-event.target.offsetTop;
        var ww = document.documentElement.clientWidth;
        var wh = window.innerHeight;
        if (event.preventDefault) {
          event.preventDefault();
        } else{
          event.returnValue=false;
        }
        let thiz = this;
        document.onmousemove=function (ev) {
          var event=ev||window.event;
          if (event.clientY < 0 || event.clientX < 0 || event.clientY > wh || event.clientX > ww) {
            return false;
          }
          var endx=event.clientX-sb_bkx;
          var endy=event.clientY-sb_bky;
          let left=endx+'px';
          let top=endy+'px';
          thiz.style = {left : left , top : top}
        }
      },
      movePhone(event){
        let thiz = this;
        let w = event.target.clientWidth;
        let h = event.target.clientHeight;
        document.ontouchmove = function(e){
          let positionX = e.changedTouches[0].pageX;
          let positionY = e.changedTouches[0].pageY;
          let windowWidth = thiz.screenWidth;
          let minLeft = w / 2;
          let minTop = h / 2;
          let maxLeft = windowWidth - minLeft;
          let maxTop = thiz.screenHeight - minTop;
          let left = positionX - minLeft;
          let top = positionY - minTop;
          left = left < -minLeft ? -minLeft : left;
          left = left > maxLeft ? maxLeft : left;
          top = top < -minTop ? -minTop : top;
          top = top > maxTop ? maxTop : top;
          thiz.style = { left : left + 'px' , top : top+'px'};
        };
      },
      mouseup: function (e) {
        document.onmousemove = null;
        document.ontouchmove = null;
        let upTime = new Date().getTime();
        if( (upTime - this.downTime) < 200){
          this.serviceInternet();
        }
      },
      serviceInternet(){
        require('../common/js/meiQia').runMeiqia();
      }
    }
  }
</script>
<style lang="less" scoped>
  #service{
    width: 1.078rem;height: 1.21rem;display: inline-block;position: fixed;z-index: 10;
    background: url("../common/imgs/service.png") left top no-repeat;background-size: 100% auto;
  }
</style>
